<!doctype html>
<html class="no-js fixed-layout">


<!--通用head-->
{include file="Public:head"}

<body>
<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
	以获得更好的体验！</p>
<![endif]-->

<!--管理端头部-->
{include file="Public:header"}




<div class="am-cf admin-main">
	<!--管理端左菜单栏-->
	{include file="Public:menu"}

			<!-- content start -->
			<div class="admin-content">
				<div class="admin-content-body">
					<div class="am-padding">
						<div class="am-g">
							<div class="am-u-lg-12">
								<div class="am-panel am-panel-default ">
									<div class="am-panel-hd">
										<h3 class="am-panel-title">关键指标</h3>
									</div>
									<div data-am-widget="titlebar" class="am-titlebar am-titlebar-default">
										<span class="am-titlebar-title"><strong>趋势图</strong></span>
									</div>
									<div class="am-panel-bd">
										<p class="am-text-xl">地域分布</p>
									</div>
									<div id="container">加载地图数据中</div>
									

								</div>
							</div>
						</div>
					</div>

					<!--<div id="container">加载地图数据中</div>-->
				</div>

				<footer class="admin-content-footer">
					<hr>
					<p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under MIT license.</p>
				</footer>
			</div>
			<!-- content end -->

		</div>

		<a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}"></a>

		<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="__PUBLIC__static/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

		<!--[if (gte IE 9)|!(IE)]><!-->
		<script src="__PUBLIC__static/js/jquery.min.js"></script>
		<!--<![endif]-->
		<script src="__PUBLIC__static/js/amazeui.min.js"></script>
		<script src="" type="text/javascript" charset="utf-8"></script>
		<script src="__PUBLIC__static/js/highmaps.js" type="text/javascript" charset="utf-8"></script>
		<script src="__PUBLIC__static/js/app.js" type="text/javascript" charset="utf-8"></script>
		<script src="//img.hcharts.cn/mapdata/maps.js"></script>
        <script src="https://data.jianshukeji.com/geochina/china.js"></script>
		<script type="text/javascript">
           Highcharts.setOptions({
		lang: {
				drillUpText: '< 返回 “{series.name}”'
		}
});
var map = null;
$.getJSON('https://data.jianshukeji.com/jsonp?filename=geochina/china.json&callback=?', function(mapdata) {
		var data = [{
			    city: '{$provinces[0]}',
			    value: {$values[0]}
			},{
				city: '{$provinces[1]}',
				value: {$values[1]}
			},{
				city: '{$provinces[2]}',
				value: {$values[2]}
			},{
				city: '{$provinces[3]}',
			    value: {$values[3]}
			},{
				city: '{$provinces[4]}',
				value: {$values[4]}
			},{
				city: '{$provinces[5]}',
				value: {$values[5]}
			},{
				city: '{$provinces[6]}',
				value: {$values[6]}
			},{
				city: '{$provinces[7]}',
				value: {$values[7]}
			},{
				city: '{$provinces[8]}',
				value: {$values[8]}
			},{
				city: '{$provinces[9]}',
				value: {$values[9]}
			},{
				city: '{$provinces[10]}',
				value: {$values[10]}
			},{
				city: '{$provinces[11]}',
				value: {$values[11]}
			},{
				city: '{$provinces[12]}',
				value: {$values[12]}
			},{
				city: '{$provinces[13]}',
				value: {$values[13]}
			},{
				city: '{$provinces[14]}',
				value: {$values[14]}
			},{
				city: '{$provinces[15]}',
				value: {$values[15]}
			},{
				city: '{$provinces[16]}',
			    value: {$values[16]}
			},{
				city: '{$provinces[17]}',
				value: {$values[17]}
			},{
				city: '{$provinces[18]}',
			    value: {$values[18]}
			},{
			  	city: '{$provinces[19]}',
			  	value: {$values[19]}
			},{
				city: '{$provinces[20]}',
				value: {$values[20]}
			},{
				city: '{$provinces[21]}',
				value: {$values[21]}
			},{
				city: '{$provinces[22]}',
				value: {$values[22]}
			},{
				city: '{$provinces[23]}',
				value: {$values[23]}
			},{
				city: '{$provinces[24]}',
				value: {$values[24]}
			},{
				city: '{$provinces[25]}',
				value: {$values[25]}
			},{
				city: '{$provinces[26]}',
				value: {$values[26]}
			},{
				city: '{$provinces[27]}',
				value: {$values[27]}
			},{
				city: '{$provinces[28]}',
				value: {$values[28]}
			},{
				city: '{$provinces[29]}',
				value: {$values[29]}
			},{
				city: '{$provinces[30]}',
				value: {$values[30]}
			},{
				city: '{$provinces[31]}',
				value: {$values[31]}
			},{
				city: '{$provinces[32]}',
				value: {$values[32]}
			},{
				city: '{$provinces[33]}',
				value: {$values[33]}
			},{
				city: '{$provinces[34]}',
				value: {$values[34]}
			}];
		map = Highcharts.mapChart('container', {
				title: {
						text: '中国地图'
				},
				mapNavigation: {
						enabled: true,
						buttonOptions: {
								verticalAlign: 'bottom'
						}
				},
				colorAxis: {
						min: 0,
						minColor: '#fff',
						maxColor: '#006cee',
						labels:{
								style:{
										"color":"red","fontWeight":"bold"
								}
						}
				},
				series: [{
						data: data,
						mapData: mapdata,
						joinBy: ['name', 'city'],
						name: '中国'
				}]
		});
});

        </script>

</html>